﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" href="js/need/layer.css" />
    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="js/vue.min.js"></script>
    <script src="js/layer.js"></script>
    <script src="js/config.js"></script>
    <style>
        html, body {
            padding: 0px;
            margin: 0px;
        }
        h1 {
            margin-block-start: 0em;
            margin-block-end: 0em;
            line-height: 60px;
            padding-left: 20px;
        }
        .content {
            width:100%;
            height:calc(100vh - 65px);
            background-color:#ddd;

        }
            .content .left {
                background-color: #fff;
                width: 240px;
                height: 100%;
                float: left;
             
            }
                .content .left .item {
                    height: 46px;
                    width: 100%;
                    display: block;
                    text-decoration: none;
                    text-align: center;
                    line-height: 46px;
                    border-bottom: 1px solid #ededed;
                }
            .content .right {
                background-color: #fbfbe3;
                float: left;
                height: 100%;
                width: calc(100% - 241px);
            }
        .user {
            height: 99%;
        }
        .user iframe {
            width:100%;
            height:100%;
        }
        .left a{
            color:#808080;
        }
        .left .router-link-active {
            background-color: #0094ff;
            color: white;
        }
        .layui-m-layerchild h3 {
            margin-block-start: 0em;
            margin-block-end: 0em;
            border-bottom:1px solid #ddd;
        }
    </style>


</head>
<body>
    <div style="height:64px;background-color:#0094ff;color:white;">
    <h1>智慧工地综合监管平台</h1>
    </div>
    <div class="content" id="app">
        <div class="left">
          
                <router-link to="/Enter" class="item " style="margin-top: 6px;">企业</router-link>
           
           
                <router-link to="/Cart" class="item">车辆</router-link>
       
                <router-link to="/Status" class="item">状态</router-link>
           
                <router-link to="/Area" class="item">区域</router-link>
           <!-- <router-link to="/dir" class="item">指令</router-link>-->
            </div>
        <div class="right">
            <router-view></router-view>
        </div>
    </div>

    <script >

        function randomNum() {
            var n = 5;
            var rnd = "";
            for (var i = 0; i < n; i++)
                rnd += Math.floor(Math.random() * 10);
             return rnd;
        } 


   // import index from 'template/index.vue'
        //路由模板 
        //企业
        const Enter = { template: "<div class='user'><iframe frameborder=no scrolling=auto src='template/Enter.html?i=" + randomNum()+"'></iframe> </div>" };
        //车辆
        const Cart = { template: "<div class='user'><iframe frameborder=no scrolling=auto src='template/Cart.html?i=" + randomNum() +"'></iframe> </div>" };
        //状态
        const Status = { template: "<div class='user'><iframe frameborder=no scrolling=auto src='template/Status.html?i=" + randomNum() +"'></iframe> </div>" };
        //区域
        const Area = { template: "<div class='user'><iframe frameborder=no scrolling=auto src='template/Area.html?i=" + randomNum() +"'></iframe> </div>" };
    
    const routes = [
        { path: '/', component: Enter },
        { path: '/Enter', component: Enter },
        { path: '/Cart', component: Cart },
        { path: '/Status', component: Status },
        { path: '/Area', component: Area },
       
    ]
        

        window.registraror("Status", function (data) {
            if (data.type == "map") {
                layer.open({
                    type: 2,
                    title:"地图",

                    area: ['70vw', '70vh'],
                    //    maxmin: true,
                    content: "template/mobel/map.html?lng=" + data.data.settings.WX + "&lat=" + data.data.settings.WY + "&name=" + data.data.PlateNumber
                });
            }

            if (data.type == "query") {
                layer.open({
                    type: 2,
                    title: data.data.PlateNumber,

                    area: ['70vw', '70vh'],
                    //    maxmin: true,
                    content: "template/mobel/StatusInfo.html?time=" + window.setUserInfoData(data.data)
                });
            }
            

        });

        window.registraror("Area", function (data) {
            if (data.type == "del") {
                layer.confirm('您是删除该区域:' + data.data.GeoName, {
                    btn: ['是', '否'] //按钮
                }, function () {
                    layer.msg('删除成功', { icon: 1 });
                }, function () {
                    layer.msg('取消删除', { icon: 2 });
                });
            }

         


        });
        window.registraror("Cart", function (data) {
            if (data.type == "query") {
                layer.open({
                    type: 2,
                    title: data.PlateNumber,

                    area: ['70vw', '70vh'],
                    //    maxmin: true,
                    content: "template/mobel/CartInfo.html?time=" + window.setUserInfoData(data.data)
                });
            }
            if (data.type == "del") {
                layer.confirm('您是删除该车辆:' + data.data.PlateNumber, {
                    btn: ['是', '否'] //按钮
                }, function () {
                    layer.msg('删除成功', { icon: 1 });
                }, function () {
                    layer.msg('取消删除', { icon: 2 });
                });
            }
        });
        window.registraror("Enter", function (data) {
            //layer.open({
            //    type: 2,
            //    title: data.ComapnyName,

            //    area: ['70vw', '70vh'],
            //    //    maxmin: true,
            //    content: "template/mobel/EnterInfo.html"
            //});

            if (data.type == "del") {
                layer.confirm('您是删除该企业:' + data.data.ComapnyName, {
                    btn: ['是', '否'] //按钮
                }, function () {
                    layer.msg('删除成功', { icon: 1 });
                }, function () {
                    layer.msg('取消删除', { icon:2 });
                });
            }

        });

        window.registraror("Area", function (data) {


        });
    // 3. 创建 router 实例，然后传 `routes` 配置
    // 你还可以传别的配置参数, 不过先这么简单着吧。
    const router = new VueRouter({
        routes // （缩写）相当于 routes: routes
    })

    // 4. 创建和挂载根实例。
    // 记得要通过 router 配置参数注入路由，
    // 从而让整个应用都有路由功能
    const app = new Vue({
        router
    }).$mount('#app')
    </script>
</body>
</html>